<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册界面</title>
    <link rel="stylesheet" th:href="@{/css/reset.css}"/>
    <link rel="stylesheet" th:href="@{/css/common.css}"/>
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <script type="text/javascript" th:src="@{/dist/js/jquery.min.js}" ></script>
</head>
<body>
<div class="wrap login_wrap">
    <div class="content">

        <div class="logo">
            <label for="id_avator">
                <img src="./img/icon.png" id="avatar_img"/>
            </label>
            <input type="file" id="id_avator" accept="image/png" hidden style="width: 40rem;"/>
        </div>

        <div class="login_box">

            <div class="login_form">
                <div class="login_title">
                    注册
                </div>
                <form id="regist_form" th:action="@{/regist}" method="post">

                    <div class="form_text_ipt">
                        <label>
                            <input name="username" type="text" placeholder="账号">
                        </label>
                    </div>
                    <div class="ececk_warning"><span>账号不能为空</span></div>
                    <div class="form_text_ipt">
                        <label>
                            <input name="password" type="password" placeholder="密码">
                        </label>
                    </div>
                    <div class="ececk_warning"><span>密码不能为空</span></div>
                    <div class="form_text_ipt">
                        <label>
                            <input name="repassword" type="password" placeholder="重复密码">
                        </label>
                    </div>
                    <div class="ececk_warning"><span>密码不能为空</span></div>
                    <div class="form_text_ipt">
                        <label for="phone">
                            <input name="phone" id="phone" type="text" placeholder="手机号">
                        </label>

                    </div>
                    <div class="ececk_warning"><span>手机号不能为空</span></div>
                    <div class="form_text_ipt">
                    <label for="vcode">
                        <input type="text" style="width:180px" id="vcode" name="vcode" placeholder="验证码">
                        <button type="button" style="border-radius:5px;" onclick="getVcode()">获取验证码</button>
                    </label>
                    </div>
                    <!--<div class="ececk_warning"><span>验证码不能为空</span></div>-->
                    <div class="form_btn">
                        <button type="submit" style="margin-top: 10px;">注册</button>
                    </div>
                    <div class="form_reg_btn"style="margin-top: 10px;" >&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;<span>已有帐号？</span><a th:href="@{/login}">马上登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div style="text-align:center;"></div>
<input name="rootUrl" id="rootUrl"  style="display:none;" th:value="${#request.contextPath}">
<script type="text/javascript">
    var contextPath =$("#rootUrl").val();
    function getVcode(){
        var phone = $("#phone").val();
        if(phone===""){
            alert("请输入手机号");
        }else {
            $.post(contextPath+"/getVcode", {"phone": phone}, function (data) {
                if (data === "true") {
                    alert("验证码已发送至您的手机");
                } else {
                    alert("获取验证码失败");
                }
            });
        }
    }
</script>
</body>
</html>
